<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>预期收益</span>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="table"
        :header-cell-style="{ background: '#e1e4e5' }"
      >
        <el-table-column prop="productId" label="产品" width="180">
        </el-table-column>
        <el-table-column prop="investRcordID" label="投资记录" width="180">
        </el-table-column>
        <el-table-column prop="expectedDate" label="投资到期时间">
        </el-table-column>
        <el-table-column prop="return_Money" label="待提取收益（元）">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.return_Money > 0"
              :disabled="checkdisabled(scope.row.expectedStamp)"
              type="success"
              size="mini"
              @click="WithdrawalIncome(scope.row.return_id)"
              >提取收益</el-button
            >
            <el-button v-else type="info" size="mini" disabled
              >已提取</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        @current-change="current"
        :page-count="filterData.totalPages"
        :current-page="filterData.curPage"
        :page-size="filterData.per_page"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 分页数据
      filterData: {
        // 交易类型
        totalPages: 1,
        curPage: 1,
        perPage: 3
      },
      // 表格数据
      tableData: [],
    };
  },
  methods: {
    ...mapActions({
      // 获取预期收益的数据
      ExpectedReturn: "loan/ExpectedReturn",
      // 获得收益
      getIncome: "loan/getIncome",
      // 获取用户信息
      userInfo: "user/userInfo",
    }),
    // 刷新数据
    getExpectedReturn() {
      this.ExpectedReturn(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages
      });
    },
    // 当页码发生变化时
    current(index) {
      this.filterData.curPage = index;
      this.getExpectedReturn();
    },
    // 提取收益
    WithdrawalIncome(id) {
      const return_id = { return_id: id };
      this.getIncome(return_id).then((res) => {
        this.$message({
          message: "提取收益成功",
          type: "success",
        });
        // 刷新数据
        this.getExpectedReturn();
        // this.userInfo()
      });
    },
    // 判断是否可以点击提取收益
    checkdisabled(stamp) {
      // 获得当前的日期（单位是毫秒）
      const cur_data = new Date();
      // 后台返回的是秒的单位,转化到js里面来的话要*1000
      const ex_data = new Date(stamp * 1000);
      // 这里给他取反就是可以点击的状态
      return !(cur_data >= ex_data);
    },
  },
  created() {
    this.getExpectedReturn();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .box-card {
    .table {
      margin-top: 5px;
    }
  }
}
</style>
